{% load static %}

<!doctype html>
<html lang="en">
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>MyLife主页</title>
    <link rel="stylesheet" href='{% static 'static/css/color.css' %}'>
    <link rel="stylesheet" href='{% static 'static/css/c3d41e71ba8b4d9495baf8406ed4017f.css' %}'>
    <link rel="stylesheet" href='{% static 'static/css/default.css' %}'>
    <link rel="stylesheet" href='{% static 'static/css/plugins.css' %}'>
    <link rel="stylesheet" href='{% static 'static/css/style.css' %}'>
    <link id="template-color" rel="stylesheet" href='{% static 'static/css/color.css' %}'>

</head>
<body>

<div id="preloader">
    <div class="spinner">
        <div class="uil-ripple-css">
            <div></div>
            <div></div>
        </div>
    </div>
</div>
<header class="site-header fixed-top">
    <div class="container-fluid">
        <div class="row justify-content-between">
            <div class="col-xl-2 col-lg-2 my-auto d-none d-lg-block">
                <div class="d-flex">
                    <a href="#" class="sidebar-toggle">
                        <i class="far fa-bars"></i>
                    </a>
                    <div class="logo my-auto">
                        <a href="index.html"><img src="{% static 'images/logo.png' %}"
                                                  class="custom-logo" alt="ViewTube" style="height: 50px"></a></div>
                </div>
            </div>
            <div class="col-xl-7 col-lg-7 my-auto d-none d-xl-block">
                <div class="encouraging-words">
                    <form class="ajax-search-form" action="https://so.gushiwen.cn/search.aspx?" method="get">
                        <input type="hidden" name="value" value="{{ content.word }}">
                        <input type="hidden" name="valuej" value="{{ content.word|slice:':1' }}">
                        <button type="submit"><i class="fa fa-search"></i></button>
                    </form> 
                    <span>{{ content.word }}</span>
                    <span class="citation">——{{ content.citation }}</span>
                    
                </div>
                
            </div>
            <div class="col-xl-1 col-lg-1 my-auto text-right">
                <a class="upload-video" href="upload-video.html"><i class="far fa-video-plus"></i></a>
            </div>
            <div class="col-xl-2 col-lg-2 my-auto">
                <div class="d-flex">
                    <div class="d-flex my-auto">
                        <i class="fad fa-sun my-auto"></i>
                        <label class="toggle-switch">
                            <input type="checkbox">
                            <span class="slider round"></span>
                        </label>
                    </div>
                    <div class="d-flex float-right">
                        <div class="top-header-action">
                            <div class="widget-header">
                                <div class="my-account-widget">
                                    <div class="my-account-button">
                                        <i class="fad fa-user"></i>
                                    </div>
                                    <div class="my-account-content">
                                        <div class="header-profile-login">
                                            <div class="my-account-content">
                                                <div class="header-profile-login">
                                                    <h5 class="text-center">治愈之旅，一键打开</h5>
                                                    {% if user_id %}
                                                    <a href="/social/{{ username }}/">
                                                        <input class="login-submit" type="button" value="个人主页" />
                                                    </a>
                                                    {% else %}
                                                    <a href="/login" class="button button-primary">登录</a>
                                                    {% endif %}
                                                </div>
                                            </div>    
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>
<div class="off-canvas-menu-bar">
    <div class="pl-30 pr-30">
        <div class="row">
            <div class="col-7 my-auto">
                <a href="" class="custom-logo-link" rel="home" aria-current="page"><img width="512"
                                                                                                  height="85"
                                                                                                  src="{% static 'static/picture/logo.png' %}"
                                                                                                  class="custom-logo"
                                                                                                  alt="ViewTube"></a>
            </div>
            <div class="col-3 my-auto">
                <label class="toggle-switch">
                    <input type="checkbox">
                    <span class="slider round"></span>
                </label>
            </div>
            <div class="col-2 my-auto">
                <div class="mobile-nav-toggler"><span class="fas fa-bars"></span></div>
            </div>
        </div>
    </div>
</div>
<div class="off-canvas-menu">
    <div class="menu-backdrop"></div>
    <i class="close-btn fa fa-close"></i>
    <nav class="mobile-nav">
        <div class="text-center pt-3 pb-3">
            <a href="index.html" class="custom-logo-link" rel="home"><img src="{% static 'images/logo.png' %}"
                                                                          class="custom-logo" alt="Sayara"></a></div>
        <ul class="navigation">
        </ul>
    </nav>
</div>
<div class="container-fluid p-0">
    <div class="d-flex topspace-90">
        <div class="sidebar-menu open">
            <nav class="desktop-menu">
			   <ul class="menu">
			                   {% if content.user_id and content.username %}
			                       <li class="menu-item"><a href="{% url 'view_likes' content.username %}"><i class="fas fa-heart"></i><span>点赞内容</span></a></li>
			                       <li class="menu-item"><a href="{% url 'view_posts' content.username %}"><i class="fas fa-images"></i><span>帖子浏览</span></a></li>
			                       <li class="menu-item"><a href="{% url 'edit_profile' content.username %}"><i class="fas fa-user-edit"></i><span>编辑资料</span></a></li>
			                       <li class="menu-item"><a href="{% url 'friend_messages' content.username %}"><i class="fas fa-comments"></i><span>消息互动</span></a></li>
			                       <li class="menu-item"><a href="{% url 'manage_profile' content.username %}"><i class="fas fa-user-friends"></i><span>朋友管理</span></a></li>
			                       <li class="menu-item"><a href="{% url 'movies_recommendations' content.user_id %}"><i class="fas fa-play-circle"></i><span>电影推荐</span></a></li>
			                       <li class="menu-item"><a href="{% url 'movies_search' %}"><i class="fas fa-film"></i><span>电影搜索</span></a></li>
			                       <li class="menu-item"><a href="{% url 'music_index' %}"><i class="fas fa-music"></i><span>音乐推荐</span></a></li>
			                       <li class="menu-item"><a href="{% url 'movies_results' %}"><i class="fas fa-star"></i><span>热门电影</span></a></li>
			                       <li class="menu-item"><a href="{% url 'view_top_music' %}"><i class="fas fa-headphones"></i><span>音乐排行</span></a></li>
			                   {% else %}
			                       <li class="menu-item"><a href="{% url 'login' %}"><i class="fas fa-heart"></i><span>点赞内容</span></a></li>
			                       <li class="menu-item"><a href="{% url 'login' %}"><i class="fas fa-images"></i><span>帖子浏览</span></a></li>
			                       <li class="menu-item"><a href="{% url 'login' %}"><i class="fas fa-user-edit"></i><span>编辑资料</span></a></li>
			                       <li class="menu-item"><a href="{% url 'login' %}"><i class="fas fa-comments"></i><span>消息互动</span></a></li>
			                       <li class="menu-item"><a href="{% url 'login' %}"><i class="fas fa-user-friends"></i><span>朋友管理</span></a></li>
			                       <li class="menu-item"><a href="{% url 'login' %}"><i class="fas fa-play-circle"></i><span>电影推荐</span></a></li>
			                       <li class="menu-item"><a href="{% url 'login' %}"><i class="fas fa-film"></i><span>电影搜索</span></a></li>
			                       <li class="menu-item"><a href="{% url 'login' %}"><i class="fas fa-music"></i><span>音乐推荐</span></a></li>
			                       <li class="menu-item"><a href="{% url 'login' %}"><i class="fas fa-star"></i><span>热门电影</span></a></li>
			                       <li class="menu-item"><a href="{% url 'login' %}"><i class="fas fa-headphones"></i><span>音乐排行</span></a></li>
			                   {% endif %} 
			                   </ul>
            </nav>
        </div>
        <div class="main-container">
            <div class="banners mt-4 mb-5">
                <section class="banner" style="background: url({% static 'static/images/zhou.jpg' %});">
                    <div class="container">
                        <div class="row">
                            <div class="col-xl-7 col-lg-12 my-auto">
                                <div class="banner-content">
                                    <h1>
                                    </h1>
                                    <div class="d-block d-lg-flex">
                                        <ul class="list-inline meta">
                                            <!-- <li class="list-inline-item"><i class="fad fa-film-alt"></i>Action</li>
                                            <li class="list-inline-item"><i class="fad fa-calendar-week"></i>2021</li>
                                            <li class="list-inline-item"><i class="fad fa-play-circle"></i>2 h 20 min
                                            </li> -->
                                            <li class="list-inline-item"><span>4K</span></li>
                                        </ul>
                                    </div>
                                    <a class="viewtube-btn popup-video mt-30" href="/login">来听听新歌</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                <section class="banner" style="background: url({% static 'static/images/Jay.png' %}) no-repeat center center; background-size: cover;">
                    <div class="container">
                        <div class="row">
                            <div class="col-xl-7 col-lg-12 my-auto">
                                <div class="banner-content">
                                    <h1>
                                        The Pale Door </h1>
                                    <div class="d-block d-lg-flex">
                                        <ul class="list-inline meta">
                                            <li class="list-inline-item"><i class="fad fa-film-alt"></i>Action</li>
                                            <li class="list-inline-item"><i class="fad fa-calendar-week"></i>2021</li>
                                            <li class="list-inline-item"><i class="fad fa-play-circle"></i>2 h 20 min
                                            </li>
                                            <li class="list-inline-item"><span>HD</span></li>
                                        </ul>
                                    </div>
                                    <p>In the 1820s, a frontiersman, Hugh Glass, sets out on a path of vengeance against
                                        those who left him for dead after</p>
                                    <a class="viewtube-btn popup-video mt-30" href="#">Watch Video</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                <section class="banner"
                         style="background: url({% static 'static/images/chaozzy-lin-des3ft1larc-unsplash.jpg' %});">
                    <div class="container">
                        <div class="row">
                            <div class="col-xl-7 col-lg-12 my-auto">
                                <div class="banner-content">
                                    <h1>
                                        Paper Lives </h1>
                                    <div class="d-block d-lg-flex">
                                        <ul class="list-inline meta">
                                            <li class="list-inline-item"><i class="fad fa-film-alt"></i>Action</li>
                                            <li class="list-inline-item"><i class="fad fa-calendar-week"></i>2021</li>
                                            <li class="list-inline-item"><i class="fad fa-play-circle"></i>2 h 20 min
                                            </li>
                                            <li class="list-inline-item"><span>8K</span></li>
                                        </ul>
                                    </div>
                                    <p>In the 1820s, a frontiersman, Hugh Glass, sets out on a path of vengeance against
                                        those who left him for dead after</p>
                                    <a class="viewtube-btn popup-video mt-30" href="#" tabindex="-1">Watch Video</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>

            <div class="row mb-4">
                <div class="col-md-6 my-auto">
                    <h1>Trending</h1>
                </div>
                <div class="col-md-6 my-auto">
                    <div class="text-right">
                        <a class="viewtube-btn bordered no" href="#">
                            Watch More</a>
                    </div>
                </div>
            </div>
            <div class="row justify-content-center video-items" data-slick='{"slidesToShow": 3, "slidesToScroll": 1}'>
                <div class="col-xl-12">
                    <div class="video-item-card">
                        <div class="video-thumb">
                            <video class="viewtube-player" preload="none" playsinline controls
                                   data-poster="assets/images/5465.jpg">
                                <source src="https://www.dropbox.com/s/dmdvpq368yoxgy1/Disney-and-Pixar-s-Luca-Teaser-Trailer.mp4?dl=1"
                                        type="video/mp4"/>
                                <source src="https://www.dropbox.com/s/dmdvpq368yoxgy1/Disney-and-Pixar-s-Luca-Teaser-Trailer.mp4?dl=1"
                                        type="video/webm"/>
                            </video>
                        </div>
                        <div class="video-content">
                            <div class="d-flex">
                                <a href="#" class="avatar">
                                    <img src="static/picture/6b1345063abbc415fde0677567f2cf59.jpeg"
                                         alt="Bayley Robertson">
                                </a>
                                <div class="my-auto">
                                    <a href="video.html">
                                        <h5>Disney and Pixar&#8217;s Luca | Teaser Trailer</h5>
                                    </a>
                                    <ul class="list-inline">
                                        <li class="list-inline-item">
                                            <a class="author" href="#">
                                                Bayley Robertson </a>
                                        </li>
                                        <li class="list-inline-item">
                                            <div class="d-flex video-meta-bottom">
                                                1170 Views <i class="fas fa-circle ml-2 mr-2"></i>
                                                5 months ago
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-12">
                    <div class="video-item-card">
                        <div class="video-thumb">
                            <video class="viewtube-player" preload="none" playsinline controls
                                   data-poster="assets/images/FYU-N2RWfso.jpg">
                                <source src="https://www.dropbox.com/s/kckwz75pvhl8v0y/What-will-SpaceX-do-when-they-get-to-Mars.mp4?dl=1"
                                        type="video/mp4"/>
                                <source src="https://www.dropbox.com/s/kckwz75pvhl8v0y/What-will-SpaceX-do-when-they-get-to-Mars.mp4?dl=1"
                                        type="video/webm"/>
                            </video>
                        </div>
                        <div class="video-content">
                            <div class="d-flex">
                                <a href="#" class="avatar">
                                    <img src="static/picture/48dc418ef002957c6c867cb40aa191cc.jpeg" alt="David Parker">
                                </a>
                                <div class="my-auto">
                                    <a href="video.html">
                                        <h5>What will SpaceX do when they get to Mars?</h5>
                                    </a>
                                    <ul class="list-inline">
                                        <li class="list-inline-item">
                                            <a class="author" href="#">
                                                David Parker </a>
                                        </li>
                                        <li class="list-inline-item">
                                            <div class="d-flex video-meta-bottom">
                                                391 Views <i class="fas fa-circle ml-2 mr-2"></i>
                                                5 months ago
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-12">
                    <div class="video-item-card">
                        <div class="video-thumb">
                            <video class="viewtube-player" preload="none" playsinline controls
                                   data-poster="assets/images/FMvppuS_ehg.jpg">
                                <source src="https://www.dropbox.com/s/i40rx8gjbx6mysd/FLYING-Leaf-Blower-RC-airplane-Mk2.mp4?dl=1"/>
                                <source src="https://www.dropbox.com/s/i40rx8gjbx6mysd/FLYING-Leaf-Blower-RC-airplane-Mk2.mp4?dl=1"
                                        type="video/webm"/>
                            </video>
                        </div>
                        <div class="video-content">
                            <div class="d-flex">
                                <a href="#" class="avatar">
                                    <img src="static/picture/f71275f88816857574841b57a6f67aae.jpeg" alt="Chenai Simon">
                                </a>
                                <div class="my-auto">
                                    <a href="video.html">
                                        <h5>FLYING Leaf Blower RC airplane Mk2</h5>
                                    </a>
                                    <ul class="list-inline">
                                        <li class="list-inline-item">
                                            <a class="author" href="#">David Parker</a>
                                        </li>
                                        <li class="list-inline-item">
                                            <div class="d-flex video-meta-bottom">
                                                75 Views <i class="fas fa-circle ml-2 mr-2"></i>
                                                5 months ago
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-12">
                    <div class="video-item-card">
                        <div class="video-thumb">
                            <video class="viewtube-player" preload="none" playsinline controls
                                   data-poster="assets/images/3-MNAX1jgbA.jpg">
                                <source src="https://www.dropbox.com/s/wb1u3d069ctyvlz/Testing-the-Curiosity-Rover-on-Earth.mp4?dl=1"/>
                                <source src="https://www.dropbox.com/s/wb1u3d069ctyvlz/Testing-the-Curiosity-Rover-on-Earth.mp4?dl=1"
                                        type="video/webm"/>
                            </video>
                        </div>
                        <div class="video-content">
                            <div class="d-flex">
                                <a href="#" class="avatar">
                                    <img src="static/picture/f71275f88816857574841b57a6f67aae.jpeg" alt="Chenai Simon">
                                </a>
                                <div class="my-auto">
                                    <a href="video.html">
                                        <h5>Testing the Curiosity Rover on Earth</h5>
                                    </a>
                                    <ul class="list-inline">
                                        <li class="list-inline-item">
                                            <a class="author" href="#">Bayley Robertson</a>
                                        </li>
                                        <li class="list-inline-item">
                                            <div class="d-flex video-meta-bottom">
                                                200 Views <i class="fas fa-circle ml-2 mr-2"></i>
                                                5 months ago
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-12">
                    <div class="video-item-card">
                        <div class="video-thumb">
                            <video class="viewtube-player" preload="none" playsinline controls
                                   data-poster="assets/images/vGN6dixRBZA.jpg">
                                <source src="https://www.dropbox.com/s/59i5dp1vstfvtz9/Flight-Simulator-2020...-we-are-in-a-new-Crysis-Era-.mp4?dl=1"
                                        type="video/mp4"/>
                                <source src="https://www.dropbox.com/s/59i5dp1vstfvtz9/Flight-Simulator-2020...-we-are-in-a-new-Crysis-Era-.mp4?dl=1"
                                        type="video/webm"/>
                            </video>
                        </div>
                        <div class="video-content">
                            <div class="d-flex">
                                <a href="#" class="avatar">
                                    <img src="static/picture/f71275f88816857574841b57a6f67aae.jpeg" alt="Chenai Simon">
                                </a>
                                <div class="my-auto">
                                    <a href="video.html">
                                        <h5>We are in a new Crysis Era!</h5>
                                    </a>
                                    <ul class="list-inline">
                                        <li class="list-inline-item">
                                            <a class="author" href="#">
                                                Chenai Simon </a>
                                        </li>
                                        <li class="list-inline-item">
                                            <div class="d-flex video-meta-bottom">
                                                264 Views <i class="fas fa-circle ml-2 mr-2"></i>
                                                5 months ago
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-12">
                    <div class="video-item-card">
                        <div class="video-thumb">
                            <video class="viewtube-player" preload="none" playsinline controls
                                   data-poster="assets/images/Zv11L-ZfrSg.jpg">
                                <source src="https://www.dropbox.com/s/9ks3yh6dnx7favw/Starlink-UniFi-Does-it-work.mp4?dl=1"
                                        type="video/mp4"/>
                                <source src="https://www.dropbox.com/s/9ks3yh6dnx7favw/Starlink-UniFi-Does-it-work.mp4?dl=1"
                                        type="video/webm"/>
                            </video>
                        </div>
                        <div class="video-content">
                            <div class="d-flex">
                                <a href="#" class="avatar">
                                    <img src="static/picture/acdbf3fcda4c1f108221a12844f087f0.jpeg" alt="Harry Olson">
                                </a>
                                <div class="my-auto">
                                    <a href="video.html">
                                        <h5>Ultimate Wild Animals Collection</h5>
                                    </a>
                                    <ul class="list-inline">
                                        <li class="list-inline-item">
                                            <a class="author" href="#">
                                                Harry Olson </a>
                                        </li>
                                        <li class="list-inline-item">
                                            <div class="d-flex video-meta-bottom">
                                                173 Views <i class="fas fa-circle ml-2 mr-2"></i>
                                                5 months ago
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <section class="countdown mt-3 mb-5">
                <div class="row justify-content-center">
                    <div class="col-lg-8">
                        <h2>Live Show Will Start in</h2>
                    </div>
                    <div class="col-lg-4">
                        <div id="countdown-date10" data-date="Jul 28,2021 12:00:00"></div>
                    </div>
                </div>
            </section>

            <div class="row mb-4">
                <div class="col-md-6 my-auto">
                    <h1>Latest video</h1>
                </div>
                <div class="col-md-6 my-auto">
                    <div class="text-right">
                        <a class="viewtube-btn bordered no" href="#">
                            Watch More</a>
                    </div>
                </div>
            </div>
            <div class="row justify-content-center " data-slick='{"slidesToShow": , "slidesToScroll": }'>
                <div class="col-xl-3 col-lg-4 col-md-6">
                    <div class="video-item-card">
                        <div class="video-thumb">
                            <video class="viewtube-player" preload="none" playsinline controls
                                   data-poster="assets/images/vGN6dixRBZA.jpg">
                                <source src="https://www.dropbox.com/s/59i5dp1vstfvtz9/Flight-Simulator-2020...-we-are-in-a-new-Crysis-Era-.mp4?dl=1"
                                        type="video/mp4"/>
                                <source src="https://www.dropbox.com/s/59i5dp1vstfvtz9/Flight-Simulator-2020...-we-are-in-a-new-Crysis-Era-.mp4?dl=1"
                                        type="video/webm"/>
                            </video>
                        </div>
                        <div class="video-content">
                            <div class="d-flex">
                                <a href="#" class="avatar">
                                    <img src="static/picture/f71275f88816857574841b57a6f67aae.jpeg" alt="Chenai Simon">
                                </a>
                                <div class="my-auto">
                                    <a href="video.html">
                                        <h5>We are in a new Crysis Era!</h5>
                                    </a>
                                    <ul class="list-inline">
                                        <li class="list-inline-item">
                                            <a class="author" href="#">
                                                Chenai Simon </a>
                                        </li>
                                        <li class="list-inline-item">
                                            <div class="d-flex video-meta-bottom">
                                                264 Views <i class="fas fa-circle ml-2 mr-2"></i>
                                                5 months ago
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-4 col-md-6">
                    <div class="video-item-card">
                        <div class="video-thumb">
                            <video class="viewtube-player" preload="none" playsinline controls
                                   data-poster="assets/images/5465.jpg">
                                <source src="https://www.dropbox.com/s/dmdvpq368yoxgy1/Disney-and-Pixar-s-Luca-Teaser-Trailer.mp4?dl=1"
                                        type="video/mp4"/>
                                <source src="https://www.dropbox.com/s/dmdvpq368yoxgy1/Disney-and-Pixar-s-Luca-Teaser-Trailer.mp4?dl=1"
                                        type="video/webm"/>
                            </video>
                        </div>
                        <div class="video-content">
                            <div class="d-flex">
                                <a href="#" class="avatar">
                                    <img src="static/picture/6b1345063abbc415fde0677567f2cf59.jpeg"
                                         alt="Bayley Robertson">
                                </a>
                                <div class="my-auto">
                                    <a href="video.html">
                                        <h5>Disney and Pixar&#8217;s Luca | Teaser Trailer</h5>
                                    </a>
                                    <ul class="list-inline">
                                        <li class="list-inline-item">
                                            <a class="author" href="#">
                                                Bayley Robertson </a>
                                        </li>
                                        <li class="list-inline-item">
                                            <div class="d-flex video-meta-bottom">
                                                1172 Views <i class="fas fa-circle ml-2 mr-2"></i>
                                                5 months ago
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-4 col-md-6">
                    <div class="video-item-card">
                        <div class="video-thumb">
                            <video class="viewtube-player" preload="none" playsinline controls
                                   data-poster="assets/images/3-MNAX1jgbA.jpg">
                                <source src="https://www.dropbox.com/s/wb1u3d069ctyvlz/Testing-the-Curiosity-Rover-on-Earth.mp4?dl=1"
                                        type="video/mp4"/>
                                <source src="https://www.dropbox.com/s/wb1u3d069ctyvlz/Testing-the-Curiosity-Rover-on-Earth.mp4?dl=1"
                                        type="video/webm"/>
                            </video>
                        </div>
                        <div class="video-content">
                            <div class="d-flex">
                                <a href="#" class="avatar">
                                    <img src="static/picture/6b1345063abbc415fde0677567f2cf59.jpeg"
                                         alt="Bayley Robertson">
                                </a>
                                <div class="my-auto">
                                    <a href="video.html">
                                        <h5>Testing the Curiosity Rover on Earth</h5>
                                    </a>
                                    <ul class="list-inline">
                                        <li class="list-inline-item">
                                            <a class="author" href="#">
                                                Bayley Robertson </a>
                                        </li>
                                        <li class="list-inline-item">
                                            <div class="d-flex video-meta-bottom">
                                                166 Views <i class="fas fa-circle ml-2 mr-2"></i>
                                                5 months ago
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-4 col-md-6">
                    <div class="video-item-card">
                        <div class="video-thumb">
                            <video class="viewtube-player" preload="none" playsinline controls
                                   data-poster="assets/images/Zv11L-ZfrSg.jpg">
                                <source src="https://www.dropbox.com/s/9ks3yh6dnx7favw/Starlink-UniFi-Does-it-work.mp4?dl=1"
                                        type="video/mp4"/>
                                <source src="https://www.dropbox.com/s/9ks3yh6dnx7favw/Starlink-UniFi-Does-it-work.mp4?dl=1"
                                        type="video/webm"/>
                            </video>
                        </div>
                        <div class="video-content">
                            <div class="d-flex">
                                <a href="#" class="avatar">
                                    <img src="static/picture/acdbf3fcda4c1f108221a12844f087f0.jpeg" alt="Harry Olson">
                                </a>
                                <div class="my-auto">
                                    <a href="video.html">
                                        <h5>Ultimate Wild Animals Collection</h5>
                                    </a>
                                    <ul class="list-inline">
                                        <li class="list-inline-item">
                                            <a class="author" href="#">
                                                Harry Olson </a>
                                        </li>
                                        <li class="list-inline-item">
                                            <div class="d-flex video-meta-bottom">
                                                173 Views <i class="fas fa-circle ml-2 mr-2"></i>
                                                5 months ago
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-4 col-md-6">
                    <div class="video-item-card">
                        <div class="video-thumb">
                            <video class="viewtube-player" preload="none" playsinline controls
                                   data-poster="assets/images/ih6_YyRVtpI.jpg">
                                <source src="https://www.dropbox.com/s/4bd3k9u1mztqzii/GoPro-HERO-9-Review-5-Months-Later.mp4?dl=1"
                                        type="video/mp4"/>
                                <source src="https://www.dropbox.com/s/4bd3k9u1mztqzii/GoPro-HERO-9-Review-5-Months-Later.mp4?dl=1"
                                        type="video/webm"/>
                            </video>
                        </div>
                        <div class="video-content">
                            <div class="d-flex">
                                <a href="#" class="avatar">
                                    <img src="static/picture/acdbf3fcda4c1f108221a12844f087f0.jpeg" alt="Harry Olson">
                                </a>
                                <div class="my-auto">
                                    <a href="video.html">
                                        <h5>GoPro HERO 9 Review: 5 Months Later!</h5>
                                    </a>
                                    <ul class="list-inline">
                                        <li class="list-inline-item">
                                            <a class="author" href="#">
                                                Harry Olson </a>
                                        </li>
                                        <li class="list-inline-item">
                                            <div class="d-flex video-meta-bottom">
                                                143 Views <i class="fas fa-circle ml-2 mr-2"></i>
                                                5 months ago
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-4 col-md-6">
                    <div class="video-item-card">
                        <div class="video-thumb">
                            <video class="viewtube-player" preload="none" playsinline controls
                                   data-poster="assets/images/G99XxEDbNEs.jpg">
                                <source src="https://www.dropbox.com/s/ga406kw8db2wapv/Kepler-Telescope-Found-New-Planets-Better-Than-Earth.mp4?dl=1"
                                        type="video/mp4"/>
                                <source src="https://www.dropbox.com/s/ga406kw8db2wapv/Kepler-Telescope-Found-New-Planets-Better-Than-Earth.mp4?dl=1"
                                        type="video/webm"/>
                            </video>
                        </div>
                        <div class="video-content">
                            <div class="d-flex">
                                <a href="#" class="avatar">
                                    <img src="static/picture/f71275f88816857574841b57a6f67aae.jpeg " alt="Chenai Simon">
                                </a>
                                <div class="my-auto">
                                    <a href="video.html">
                                        <h5>Kepler Telescope Found New Planets</h5>
                                    </a>
                                    <ul class="list-inline">
                                        <li class="list-inline-item">
                                            <a class="author" href="#">
                                                Chenai Simon </a>
                                        </li>
                                        <li class="list-inline-item">
                                            <div class="d-flex video-meta-bottom">
                                                173 Views <i class="fas fa-circle ml-2 mr-2"></i>
                                                5 months ago
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-4 col-md-6">
                    <div class="video-item-card">
                        <div class="video-thumb">
                            <video class="viewtube-player" preload="none" playsinline controls
                                   data-poster="assets/images/8IGsQoL1AgQ.jpg">
                                <source src="https://www.dropbox.com/s/kdh44utn5buqdrk/Hacking-Satellites-with-300-Worth-of-TV-Gear.mp4?dl=1"
                                        type="video/mp4"/>
                                <source src="https://www.dropbox.com/s/kdh44utn5buqdrk/Hacking-Satellites-with-300-Worth-of-TV-Gear.mp4?dl=1"
                                        type="video/webm"/>
                            </video>
                        </div>
                        <div class="video-content">
                            <div class="d-flex">
                                <a href="#" class="avatar">
                                    <img src="static/picture/6b1345063abbc415fde0677567f2cf59.jpeg"
                                         alt="Bayley Robertson">
                                </a>
                                <div class="my-auto">
                                    <a href="video.html">
                                        <h5>Hacking Satellites with $300 Worth of TV Gear</h5>
                                    </a>
                                    <ul class="list-inline">
                                        <li class="list-inline-item">
                                            <a class="author" href="#">
                                                Bayley Robertson </a>
                                        </li>
                                        <li class="list-inline-item">
                                            <div class="d-flex video-meta-bottom">
                                                103 Views <i class="fas fa-circle ml-2 mr-2"></i>
                                                5 months ago
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-4 col-md-6">
                    <div class="video-item-card">
                        <div class="video-thumb">
                            <video class="viewtube-player" preload="none" playsinline controls
                                   data-poster="assets/images/wzpjnFQ030M.jpg">
                                <source src="https://www.dropbox.com/s/6e7m0siialf2f4f/Best-Windows-10-Theme-2021.mp4?dl=1"
                                        type="video/mp4"/>
                                <source src="https://www.dropbox.com/s/6e7m0siialf2f4f/Best-Windows-10-Theme-2021.mp4?dl=1"
                                        type="video/webm"/>
                            </video>
                        </div>
                        <div class="video-content">
                            <div class="d-flex">
                                <a href="#" class="avatar">
                                    <img src="static/picture/48dc418ef002957c6c867cb40aa191cc.jpeg" alt="David Parker">
                                </a>
                                <div class="my-auto">
                                    <a href="video.html">
                                        <h5>Best Windows 10 Theme 2021</h5>
                                    </a>
                                    <ul class="list-inline">
                                        <li class="list-inline-item">
                                            <a class="author" href="#">
                                                David Parker </a>
                                        </li>
                                        <li class="list-inline-item">
                                            <div class="d-flex video-meta-bottom">
                                                97 Views <i class="fas fa-circle ml-2 mr-2"></i>
                                                5 months ago
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="row pt-100 pb-100">
                <div class="col-md-6 my-auto">
                    <section class="ad-banner horizontal" style="background-image: url(static/images/banner-ad.jpg);">
                        <div class="container">
                            <div class="row justify-content-between">
                                <div class="col-md-12 text-left">
                                    <p>Action Movie</p>
                                    <h2 class="mb-5">The Curse of Audrey</h2>
                                    <a class="viewtube-btn" href="#">Watch Now</a>
                                </div>
                            </div>
                        </div>
                    </section>
                </div>
                <div class="col-md-6 my-auto">
                    <section class="ad-banner horizontal" style="background-image: url(static/images/ad-banner.jpg);">
                        <div class="container">
                            <div class="row justify-content-between">
                                <div class="col-md-12 text-left">
                                    <p>Science Fiction</p>
                                    <h2 class="mb-5">Anything for Jackson</h2>
                                    <a class="viewtube-btn" href="#">Watch Now</a>
                                </div>
                            </div>
                        </div>
                    </section>
                </div>
            </div>

            <div class="row mb-4">
                <div class="col-md-6 my-auto">
                    <h1>Latest Article</h1>
                </div>
                <div class="col-md-6 my-auto">
                    <div class="text-right">
                        <a class="viewtube-btn bordered no" href="#">Read More</a>
                    </div>
                </div>
            </div>
            <div class="row pb-70">
                <div class="col-xl-4 col-md-6">
                    <div class="blog--item">
                        <div class="blog--thumb">
                            <a href="single.html">
                                <img src="static/picture/ben-collins-spdowp6pnbs-unsplash.jpg" alt="img">
                            </a>
                        </div>
                        <div class="blog--content">
                            <div class="blog--meta">
<span>
<i class="fal fa-user pr-10"></i>
<a href="#">Bayley Robertson</a></span>
                                <span class="pl-10">
<i class="fal fa-tags pr-10"></i>
<a href="#">Body Parts</a> </span>
                            </div>
                            <h4><a href="single.html">Drama Is Life With The Dull Bits ..</a></h4>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                                incididunt ut labore...</p>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-md-6">
                    <div class="blog--item">
                        <div class="blog--thumb">
                            <a href="single.html">
                                <img src="static/picture/troy-t-9sqgt_cr50c-unsplash.jpg" alt="img">
                            </a>
                        </div>
                        <div class="blog--content">
                            <div class="blog--meta">
<span>
<i class="fal fa-user pr-10"></i>
<a href="#">Chenai Simon</a></span>
                                <span class="pl-10">
<i class="fal fa-tags pr-10"></i>
<a href="#">Body Parts</a>
</span>
                            </div>
                            <h4><a href="single.html">Filmmaking Can Give You Everything</a></h4>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                                incididunt ut labore...</p>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-md-6">
                    <div class="blog--item">
                        <div class="blog--thumb">
                            <a href="single.html">
                                <img src="static/picture/kal-visuals-ijztans4kuk-unsplash.jpg" alt="img">
                            </a>
                        </div>
                        <div class="blog--content">
                            <div class="blog--meta">
<span>
<i class="fal fa-user pr-10"></i>
<a href="#">David Parker</a></span>
                                <span class="pl-10">
<i class="fal fa-tags pr-10"></i>
<a href="#">Body Parts</a>
</span>
                            </div>
                            <h4><a href="single.html">I Love Editing. It’s One Of My Fa..</a></h4>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
                                incididunt ut labore...</p>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<footer class="site-footer">
    <div class="container">
        <div class="row pt-100 pb-50">
            <div class="col-md-12 text-center">
                <a href="index.html"><img class="mb-70" src="static/picture/logo-alt.png" alt="Logo"></a>
            </div>

        </div>
        <div class="row pb-4">
            <div class="col-xl-4 col-md-6 my-auto">
                <ul class="list-inline social mb-0">
                    <li class="list-inline-item"><a href="#"><i class="fab fa-facebook"></i></a></li>
                    <li class="list-inline-item"><a href="#"><i class="fab fa-twitter"></i></a></li>
                    <li class="list-inline-item"><a href="#"><i class="fab fa-youtube"></i></a></li>
                    <li class="list-inline-item"><a href="#"><i class="fab fa-linkedin"></i></a></li>
                </ul>
            </div>
            <div class="col-xl-2 offset-xl-4 col-md-3">
                <a href="#">
                    <img class="img-fluid" src="static/picture/playstore.png" title="playstore" alt="playstore">
                </a>
            </div>
            <div class="col-xl-2 col-md-3 my-auto">
                <a href="#">
                    <img class="img-fluid" src="static/picture/appstore.png" title="appstore" alt="appstore">
                </a>
            </div>
        </div>
    </div>

</footer>
<div id="backtotop" style="display: block;"><i class="fal fa-lg fa-arrow-up"></i></div>
<script src='{% static 'static/js/plugins.js' %}'></script>
<script src='{% static 'static/js/main.js' %}'></script>
</body>
</html>